<template>
	<view>
		<view class="">
			<!-- 轮播图 -->
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular>
				<swiper-item v-for="(item , index) in swiperList" :key="index">
					<view class="swiper-item">
						<image :src="item"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 导航 -->
		<view class="nav-list">
			<view class="nav-item" v-for="(item,index) in navList" :key="index">
				<view>
					<image :src="item.image_url" class="nav-image" style="margin: 0px 16px;" @click="handleNav(item)"
						mode="widthFix">
					</image>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		<u-divider text="教练速览" textColor="#2979ff" lineColor="#1296db" textPosition="left" textSize="18px"></u-divider>
		<!-- 教练楼层 -->
		<view class="trianer-floor">
			<scroll-view scroll-x="true">
				<view class="scroll-item" v-for="(item,i) in trainerList" :key="i">
					<image :src="item.avatar" @click="handleToTrainer(item)"></image>
					<view style="width: 250rpx">
					</view>
				</view>
			</scroll-view>
			<view style="float:right;"><u--text suffixIcon="arrow-rightward" iconStyle="font-size: 18px" text="查看更多"
					@click="ToCate"></u--text></view>
		</view>

		<u-divider text="区域速览" textColor="#2979ff" lineColor="#1296db" textPosition="left" textSize="18px"></u-divider>
		<!-- 区域楼层 -->
		<view class="trianer-floor">
			<scroll-view scroll-x="true">
				<view class="scroll-item" v-for="(item,i) in regionList" :key="i">
					<image :src="item.picture" @click="handleToRegion(item)"></image>
					<view style="width: 250rpx">
					</view>
				</view>
			</scroll-view>
			<view style="float:right;"><u--text suffixIcon="arrow-rightward" iconStyle="font-size: 18px" text="查看更多"
					@click="ToCate"></u--text></view>



		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				regionList: [],
				trainerList: [],
				swiperList: [
					"../../static/swiper1.jpg",
					"../../static/swiper2.jpg",
					"../../static/swiper3.jpg",
					"../../static/swiper4.jpg"
				],
				navList: [{
						name: '教练',
						image_url: '../../static/nav-trainer.png',
						path: "/pages/category/category?cate=trainer"
					},
					{
						name: '分类',
						image_url: '../../static/nav-cate.png',
						path: '/pages/category/category'
					},
					{
						name: '器械',
						image_url: '../../static/nav-equip.png',
						path: "/pages/category/category?cate=equip"
					},
					{
						name: '失失物招领',
						image_url: '../../static/nav-lost.png',
						path: '/pages/lostBoard/lostBoard'
					}
				]
			};
		},
		onLoad() {
			this.getRegionList()
			this.getTrainerList()
		},
		methods: {
			ToCate(val) {
				uni.navigateTo({
					url: '/pages/category/category'
				})
			},
			handleToRegion(item) {
				uni.navigateTo({
					url: '/pages/region/region?id=' + item.id
				})
			},
			handleToTrainer(item) {
				uni.navigateTo({
					url: '/pages/trainer/trainer?id=' + item.id
				})
			},
			async getTrainerById(id) {
				let {
					data: res
				} = await uni.$http.get("/user/trainer/" + id)
				if (res.code === 20000) {
					console.log(res.data);
				}

			},
			handleNav(item) {
				if (item.name === '教练' || item.name === '器械') {
					uni.navigateTo({
						url: item.path
					})
				}
				uni.navigateTo({
					url: item.path
				})
			},
			async getTrainerList() {
				let {
					data: res
				} = await uni.$http.get("/user/trainer", {
					type: 'home'
				})
				if (res.code === 20000) {
					this.trainerList = res.data
				}
			},
			async getRegionList() {
				let {
					data: res
				} = await uni.$http.get("/user/region")
				if (res.code === 20000) {
					this.regionList = res.data
				}
			},


		}

	}
</script>

<style lang="scss">
	swiper {
		height: 360rpx;
		margin: 0 10rpx 30rpx 10rpx;

		.swiper-item,
		image {
			width: 100%;
			height: 100%;
		}
	}

	.nav-list {
		display: flex;
		justify-content: space-around;

		margin: 15px, 0;

		.nav-item text {
			margin: 0 auto;
			text-align: center;
			display: block;
		}


		.nav-image {
			width: 128rpx;
			height: 140rpx;
		}
	}

	.trianer-floor {
		scroll-view {
			white-space: nowrap;

			.scroll-item {
				display: inline-block;

				image {
					width: 250rpx;
					height: 250rpx;
				}
			}
		}

	}
</style>